<template>
    <h2>信息修改</h2>
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>
                    {{ data.hid }}
                </th>
            </tr>
            <tr>
                <th>会员昵称</th>
                <th>
                    <input type="text" v-model="data.hname">
                </th>
            </tr>
            <tr>
                <th>会员年龄</th>
                <th>
                    <input type="text" v-model="data.age">
                </th>
            </tr>
            <tr>
                <th>地址</th>
                <th>
                    <input type="text" v-model="data.adder">
                </th>
            </tr>
            <tr>
                <th>头像上传</th>
                <th>
                    <input type="file" @change="tupian">
                    <img :src="'https://localhost:7090/'+data.imgs" style="width: 60px;height: 60px;">
                </th>
            </tr>
            <tr>
                <th>会员状态</th>
                <th>
                    <input type="radio" value="1" name="zt" v-model="data.hzt">启用
                    <input type="radio" value="2" name="zt" v-model="data.hzt">禁用
                </th>
            </tr>
            <tr>
                <th>会员等级</th>
                <th>
                    <select v-model="data.denjiid">
                        <option value="0">请选择</option>
                        <option v-for="a in xlk" :value="a.did" >{{ a.dname}}</option>
                    </select>
                </th>
            </tr>
            <tr>
                <th></th>
                <th>
                    <input type="button" value="修改" @click="audd">
                </th>
            </tr>
        </thead>
    </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const router=useRouter()
const route=useRoute()
//反填
onMounted(()=>{
    fantian()
})
const fantian=()=>{
    axios.get("https://localhost:7090/api/HY/Fantian",{params:{id:route.query.id}}).then(res=>{
        data.value=res.data;
    })
}



///下拉框
const xlk=ref([{
    "did": 0,
    "dname": "",
    "djzt": 0,
    "quanyiid": 0
}])

onMounted(()=>{
    xllkk()
})
const xllkk=()=>{
    axios.get("https://localhost:7090/api/HY/Djxlk").then(res=>{
        xlk.value=res.data;
    })
}

//头像上传
const tupian=(val:any)=>{
    var f=val.target.files[0];
    var fd=new FormData();
    fd.append("file",f);

    if(f.size>1024*1024*2)
{
    alert('图片上传大小不得超过2MB')
    return;
}
if(f.type!="image/jpg"&&f.type!="image/png")
{
    alert('规图片类型只能为jpg、png')
    return;
}
    axios.post("https://localhost:7090/api/TP/Tupian",fd).then(res=>{
        data.value.imgs=res.data;
    })
}


const data=ref({
    "hid": 0,
  "hname": "",
  "age": 0,
  "adder": "",
  "imgs": "",
  "hzt": 0,
  "denjiid": 0
})

const audd=()=>{
    if(data.value.hname=="张三")
  {
    alert('相同的会员昵称不能出现多次')
    return;
  }
    if(data.value.hname=="小灰灰")
  {
    alert('相同的会员昵称不能出现多次')
    return;
  }
    axios.post("https://localhost:7090/api/HY/HUpdate",data.value).then(res=>{
        if(res.data>0)
    {
        alert('修改成功')
        router.push({path:"/show"})
    }
    else
    {
        alert('修改失败')
        return;
    }
    })
}
</script>

<style scoped>

</style>